<script setup lang="ts">
import {
  Table,
  Form,
  FormItem,
  Button,
  Input,
  Popconfirm,
} from "ant-design-vue";
import pageWrap from "@/components/pageWrap/index.vue";
import { columns } from "./user.data";
import { defineAsyncComponent, onMounted, reactive, ref } from "vue";
import { useElementSize } from "@vueuse/core";
import { userListApi, userDelApi } from "@/api/System/user";
import { useTableAnt } from "@/hooks/useTableAnt";

const UserModal = defineAsyncComponent(
  () => import("@/views/system/user/components/userModal.vue")
);
const EditPwModal = defineAsyncComponent(
  () => import("@/views/system/user/components/editPwModal.vue")
);

const tableContent = ref(null);
const userModalRef = ref();
const editPwInfoRef = ref();
const { height } = useElementSize(tableContent);

const {
  tableListRef,
  loading,
  tableList,
  pagination,
  query,
  queryData,
  handleDelete,
} = useTableAnt<SysUserType, SysUserQuery>({
  api: userListApi,
  delApi: userDelApi,
});

const onSubmit = () => {
  queryData();
};
const handleResize = () => {
  query.value = {};
  queryData();
};
// 点击新增
const handleAdd = () => {
  userModalRef.value.open("add", "新增用户");
};

// 点击修改
const handleEdit = (row: any) => {
  userModalRef.value.open("edit", `修改用户(${row.nickName})`, row);
};
// 点击修改密码
const handleEditPw = (row: any) => {
  editPwInfoRef.value.open("add", `修改密码(${row.nickName})`, row);
};
onMounted(() => {
  query.value = {};
});
</script>
<template>
  <pageWrap>
    <div class="bg-white p-2" style="height: 10%">
      <Form layout="inline" :model="query">
        <FormItem label="用户昵称">
          <Input v-model:value="query.nickName" placeholder="请输入用户昵称" />
        </FormItem>
        <FormItem label="手机号码">
          <Input v-model:value="query.mobile" placeholder="请输入手机号码" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click.prevent="onSubmit">查询</Button>
          <Button style="margin-left: 10px" @click="handleResize">重置</Button>
          <Button style="margin-left: 10px" @click="handleAdd">新增用户</Button>
        </FormItem>
      </Form>
    </div>
    <div class="bg-white p-2" style="height: 88%" ref="tableContent">
      <Table
        :columns="columns"
        ref="tableListRef"
        :loading="loading"
        :dataSource="tableList"
        bordered
        :pagination="pagination"
        @change="queryData"
        :total="50"
        :scroll="{ y: height - 100 }"
      >
        <template #bodyCell="{ record, column }">
          <template v-if="column.key === 'action'">
            <Button type="link" @click="handleEditPw(record)">密码重置</Button>
            <Button type="link" @click="handleEdit(record)">修改</Button>
            <Popconfirm
              title="确认删除?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record.id)"
            >
              <Button type="text" danger>删除</Button>
            </Popconfirm>
          </template>
        </template>
      </Table>
    </div>
    <!-- 新增修改组件 -->
    <UserModal ref="userModalRef" />
    <EditPwModal ref="editPwInfoRef" />
  </pageWrap>
</template>
<style scoped lang="less"></style>
